/*
 * @Author: yangzonglong
 * @Date: 2021-07-20 10:51:25
 * @version: v1.0.0
 * @Descripttion: mobile radio
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-30 16:06:45
 * @Auditor:
 */
import React, { useImperativeHandle, forwardRef, useState, useEffect } from 'react';
import { List, Radio } from 'antd-mobile';
import RequiredMark from './RequiredMark';

const MobileRadio = ({ radioProps, formItemProps, initialValue, disabled }, ref) => {
  const [value, setValue] = useState('');

  useImperativeHandle(ref, () => ({
    getData: () => value,
  }));

  useEffect(() => {
    if (initialValue) setValue(initialValue);
  }, [initialValue]);

  return (
    <List
      renderHeader={() => (
        <span>
          {formItemProps?.required && <RequiredMark />}
          {formItemProps?.label}
        </span>
      )}
    >
      {radioProps?.dataSource?.map((item) => (
        <Radio.RadioItem disabled={disabled} key={item.value} checked={value === item.value} onChange={() => setValue(item.value)}>
          {item.label}
        </Radio.RadioItem>
      ))}
    </List>
  );
};

export default forwardRef(MobileRadio);
